Autocomplete, the menu and the element bound to.

Autocomplete, the menu and the element bound to.

Hi all

Having problems running some code based on one of the samples with a custom source so using an ajax request. Works up to the point when a value is selected. The input field is set with the value of the option rather than the label. This seems to happen in the menu widget when it sets self.element.val(item.value) which would work fine if the autocomplete was created on the select but it isn't in the sample. Its set on the input. If I change the code to create the autocomplete on the select then the UI is broken because the positioning of the menu is way off to the left. I've tried to change the styling (the menudocking stuff) but its not behaving for me. Any ideas welcome.

Heres my code. First the code behind...

  1.     public partial class WebForm1 : System.Web.UI.Page
  2.     {
  3.         [Serializable]
  4.         private class CustomObject
  5.         {
  6.             public String Name { get; set; }
  7.             public Int32 Value { get; set; }
  8.         }
  9.         protected void Page_Load(object sender, EventArgs e)
  10.         {

  12.         }

  14.         [WebMethod(EnableSession = true)]
  15.         public static jsSearchResult getData()
  16.         {
  17.             List<CustomObject> list = new List<CustomObject>();
  18.             CustomObject obj = new CustomObject() { Name = "Leeds", Value = 1 };
  19.             list.Add(obj);
  20.             obj = new CustomObject() { Name = "London", Value = 2 };
  21.             list.Add(obj);
  22.             obj = new CustomObject() { Name = "Birmingham", Value = 3 };
  23.             list.Add(obj);


  26.             jsSearchResult returnObject = new jsSearchResult()
  27.             {
  28.                 Data = list,
  29.                 TotalCount = 4
  30.             };

  32.             return returnObject;
  33.         }
  34.     }

Now the markup:

  1. <meta charset="UTF-8" />
  3. <script type="text/javascript">
  4. (function($) {
  5. $.widget("ui.combobox", {
  6. _create: function() {
  7. var self = this;
  8. var select = this.element.hide();

  10. var u = this.options.url;
  11. var p = this.options.params;
  12. var m = this.options.mapper;
  13. var f = this.options.error;
  14. var pageObject = this.options.pageObject;
  15. var text = pageObject[this.options.propertyText];
  16. var value = pageObject[this.options.propertyValue];
  17. var propValueName = this.options.propertyValue;

  19. if (text && value) {
  20.    // update the select
  21.    var opts = { value: text };

  23.    $.each(opts, function(val, text) {
  24.        $(select).append($('<option></option>').val(val).html(text));
  25.    });

  27.    // update the input with the text of the returned item
  28.    $(input).val(text);
  29. }

  31. var input = $("<input>")
  32. .insertAfter(select)
  33. .autocomplete({
  34. source: function(request, response) {
  35. // var matcher = new RegExp(request.term, "i");
  36. // response(select.children("option").map(function() {
  37. // var text = $(this).text();
  38. // if (!request.term || matcher.test(text))
  39. // return {
  40. // id: $(this).val(),
  41. // label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
  42. // value: text
  43. // };
  44. // }));
  45.    $.ajax({
  46.        type: "POST",
  47.        url: u,
  48.        dataType: "json",
  49.        data: p,
  50.        contentType: "application/json; charset=utf-8",
  51.        success: function(data) {
  52.            if ($.isFunction(m)) {
  53.                var selectcontent = m(data.d);
  54.                response(selectcontent);
  55.                select.empty();
  56.                $.each(selectcontent, function(val, text) {
  57.                    $(select).append($('<option></option>').val(text.value).html(text.label));
  58.                });
  59.            }
  60.        },
  61.        error: f
  62.    })
  63. },
  64. delay: 0,
  65. select: function(e, ui) {
  66. if (!ui.item) {
  67. // remove invalid value, as it didn't match anything
  68. $(this).val("");
  69. return false;
  70. }
  71. $(this).focus();
  72. select.val(ui.item.id);
  73. self._trigger("selected", null, {
  74. item: select.find("[value='" + ui.item.id + "']")
  75. });
  77. },
  78. minLength: 0
  79. })
  80. .addClass("ui-widget ui-widget-content ui-corner-left");
  81. $("<button>&nbsp;</button>")
  82. .insertAfter(input)
  83. .button({
  84. icons: {
  85. primary: "ui-icon-triangle-1-s"
  86.            },
  87. label: '',
  88. text: false
  89. }).removeClass("ui-corner-all")
  90. .addClass("ui-corner-right ui-button-icon")
  91. .position({
  92. my: "left center",
  93. at: "right center",
  94. of: input,
  95. offset: "-1 0"
  96. }).css("top", "")
  97. .click(function() {
  98. // close if already visible
  99. if (input.autocomplete("widget").is(":visible")) {
  100. input.autocomplete("close");
  101. return;
  102. }
  103. // pass empty string as value to search for, displaying all results
  104. input.autocomplete("search", "");
  105. input.focus();
  106. });
  107. },
  108. options: { // initial values are stored in the widget's prototype
  109.    url: '../WebForm1.aspx/getData',
  110.    params: {},
  111.    input: {},
  112.    pageObject: {},
  113.    propertyText: null,
  114.    propertyValue: null,
  115.    doSearchOnEmpty: true,
  116.    dropdownData: null,
  117.    menudocking: {
  118.        menucorner: "right top",
  119.        inputcorner: "right bottom",
  120.        collision: "none"
  121.    },
  122.    mapper: function(data) {
  123.        // This default mapper method is used if the response is successful.
  124.        // It maps the elements for the option text and value. Below, the 
  125.        // item.Name & item.Value are the properties of an element in the
  126.        // collection returned by the pageMethod so supply your own mapper if
  127.        // your elements have a different property.
  128.        return $.map(data.Data, function(item) {
  129.            return {
  130.                label: item.Name,
  131.                value: item.Value
  132.            }
  133.        })
  134.    },
  135.    error: function(request, message, exception) {
  136.        if (message == "error") {
  137.            alert("The parameters to the the request are probably invalid.");
  138.        }
  139.        else {
  140.            alert(message);
  141.        }
  142.    }
  143. }
  144. });

  146. })(jQuery);

  148. $(function() {
  149.    $("select").combobox({
  150.        url: '../WebForm1.aspx/getData',
  151.        propertyText: 'DropdownText',
  152.        propertyValue: 'DropdownValue'
  153.    });
  154. });
  155. </script>
  156. <style>
  157. /* TODO shouldn't be necessary */
  158. .ui-button-icon-only .ui-button-text { padding: 0.35em; } 
  159. .ui-autocomplete-input { padding: 0.48em 0 0.47em 0.45em; }
  160. </style>


  164. <div class="demo">

  166. <div class="ui-widget">
  167. <label>Your preferred programming language: </label>
  168. <select>
  170. </select>
  171. </div>
  172. <div class="ui-widget">
  173. <label>Your preferred programming language: </label>
  174. <select>
  176. </select>
  177. </div>

  179. </div><!-- End demo -->

  181. <div class="demo-description">
  182. <p>
  183. A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
  184. </p>
  185. <p>
  186. The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
  187. </p>
  188. </div><!-- End demo-description -->


Thanks
Matt